<html>
    <head>
        <title>节点、树、虚拟DOM</title>
    </head>
    <body>
        <script>
             // 二、节点、树以及虚拟DOM
                            /*
                                在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。
                                以下面这段HTML为例：

                                        <div>
                                            <h1>My Title</h1>
                                            Some text context
                                            --ToDo: Add tagline--
                                        </div>

                                当浏览器读到这些代码时，它会建立一个"DOM 节点"树来保持追踪所有内容，如同你会画一张家谱树来"追踪"家庭成员的发展一样。

                                每个"元素"都是一个"节点"。
                                每段文字也是一个节点。设置注释也是节点。一个节点就是页面的"一个部分"。
                                就像家谱树一样，每个节点都可以有孩子节点(也就是说每个部分可以包含其他的一些部分)。
                            */

                            /*
                                高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。
                                你只需要告诉Vue你希望页面上的HTML是什么，这可以是一个模板：
                                        
                                        <h1>{{blogTitle}}</h1>

                                或者一个渲染函数里：
                                    (Vue控制DOM可以通过"模板" 或者 "渲染函数")
                            */
                            render:function(createElement){
                                            return createElement('h1',this.blogTitle)
                                        }

                            // 在这两种情况下， Vue都会自动保持页面的更新，即便 blogTitle 发生了变化。


                        // ★、虚拟DOM
                                    /*
                                        Vue 通过建立一个 "虚拟DOM" 来追踪自己要如何改变真实DOM。
                                    */
                                    // 请仔细看这行代码：
                                           return createElement('h1',this.blogTitle)
                                    /*
                                        createElement 到底返回什么呢？  
                                        其实不是一个实际的DOM元素。它更准确的名字可能是 createNodeDescription （创建节点的描述对象），
                                        因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信心。
                                        我们把这样的"节点描述对象"称为"虚拟节点(virtual node)",也常简写它为 "VNode".

                                        "虚拟DOM" 是我们对由 Vue组件树建立起来的整个VNode树的称呼。
                                    */
                                
                
        </script>
    </body>
</html>